  <template>
  <div>
    <el-divider>事件委托方式优化注册事件</el-divider>
    <el-table :data="tableData" style="width: 100%" @click.native="handleClick">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{ row }">
          <el-button
            type="warning"
            icon="el-icon-star-off"
            title="edit"
            :data-id="row.id"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-divider>老虎机动画</el-divider>
    <ul class="flex">
      <machine
        v-for="(num, idx) of numArr"
        :key="idx"
        as="li"
        :i="num"
        :delay="idx + 1"
      />
    </ul>
    <el-divider>多选</el-divider>

    <div class="block">
      <span class="demonstration">多选选择任意一级选项</span>
      {{ cascader }}
      <div class="block">
        <span class="demonstration">多选可搜索</span>
        <el-cascader
          placeholder="试试搜索：指南"
          :options="options"
          :props="{ multiple: true }"
          clearable
          :show-all-levels="false"
          v-model="cascader"
          filterable
          @expand-change="handleChangeCascader"
        ></el-cascader>
      </div>
      <!-- <el-cascader
        :show-all-levels="false"
        :options="options"
        :props="{ multiple: true, checkStrictly: true }"
        @change="handleChangeCascader"
      ></el-cascader> -->
    </div>
    <el-divider>多选器</el-divider>
    <el-input
      type="textarea"
      :autosize="{ minRows: 4, maxRows: 4 }"
      v-model="value2"
      placeholder=""
    ></el-input>
    {{ value2 }}
    <el-select
      v-model="value2"
      multiple
      collapse-tags
      style="margin-left: 20px"
      placeholder="请选择"
    >
      <el-option
        v-for="item in options1"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </div>
</template>

  <script>
import machine from "@/components/machine";
export default {
  components: {
    machine,
  },
  data() {
    return {
      tableData: [
        {
          id: "1",
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: "2",
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          id: "3",
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          id: "4",
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      num: 886,
      options: [
        {
          value: "zhinan",
          label: "指南",
          disabled: false,

          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              disabled: false,

              children: [
                {
                  value: "yizhi",
                  label: "一致",
                  disabled: false,
                },
                {
                  value: "fankui",
                  label: "反馈",
                  disabled: false,
                },
                {
                  value: "xiaolv",
                  label: "效率",
                  disabled: false,
                },
                {
                  value: "kekong",
                  label: "可控",
                  disabled: false,
                },
              ],
            },
            {
              value: "daohang",
              label: "导航",
              disabled: false,

              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航",
                  disabled: false,
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航",
                  disabled: false,
                },
              ],
            },
          ],
        },
        {
          value: "zujian",
          label: "组件",
          disabled: false,

          children: [
            {
              value: "basic",
              label: "Basic",
              disabled: false,

              children: [
                {
                  value: "layout",
                  label: "Layout 布局",
                  disabled: false,
                },
                {
                  value: "color",
                  label: "Color 色彩",
                  disabled: false,
                },
                {
                  value: "typography",
                  label: "Typography 字体",
                  disabled: false,
                },
                {
                  value: "icon",
                  label: "Icon 图标",
                  disabled: false,
                },
                {
                  value: "button",
                  label: "Button 按钮",
                  disabled: false,
                },
              ],
            },
            {
              value: "form",
              label: "Form",
              disabled: false,

              children: [
                {
                  value: "radio",
                  label: "Radio 单选框",
                  disabled: false,
                },
                {
                  value: "checkbox",
                  label: "Checkbox 多选框",
                  disabled: false,
                },
                {
                  value: "input",
                  label: "Input 输入框",
                  disabled: false,
                },
                {
                  value: "input-number",
                  label: "InputNumber 计数器",
                  disabled: false,
                },
                {
                  value: "select",
                  label: "Select 选择器",
                  disabled: false,
                },
                {
                  value: "cascader",
                  label: "Cascader 级联选择器",
                  disabled: false,
                },
                {
                  value: "switch",
                  label: "Switch 开关",
                  disabled: false,
                },
                {
                  value: "slider",
                  label: "Slider 滑块",
                  disabled: false,
                },
                {
                  value: "time-picker",
                  label: "TimePicker 时间选择器",
                  disabled: false,
                },
                {
                  value: "date-picker",
                  label: "DatePicker 日期选择器",
                  disabled: false,
                },
                {
                  value: "datetime-picker",
                  label: "DateTimePicker 日期时间选择器",
                  disabled: false,
                },
              ],
            },
            {
              value: "data",
              label: "Data",
              disabled: false,

              children: [
                {
                  value: "table",
                  label: "Table 表格",
                  disabled: false,
                },
                {
                  value: "tag",
                  disabled: false,
                  label: "Tag 标签",
                },
              ],
            },
            {
              value: "notice",
              disabled: false,
              label: "Notice",
              children: [
                {
                  value: "alert",
                  disabled: false,
                  label: "Alert 警告",
                },
                {
                  value: "loading",
                  disabled: false,
                  label: "Loading 加载",
                },
              ],
            },
            {
              value: "navigation",
              disabled: false,
              label: "Navigation",
              children: [
                {
                  value: "menu",
                  disabled: false,
                  label: "NavMenu 导航菜单",
                },
                {
                  value: "tabs",
                  disabled: false,
                  label: "Tabs 标签页",
                },
                {
                  value: "breadcrumb",
                  disabled: false,
                  label: "Breadcrumb 面包屑",
                },
                {
                  value: "dropdown",
                  disabled: false,
                  label: "Dropdown 下拉菜单",
                },
                {
                  value: "steps",
                  disabled: false,
                  label: "Steps 步骤条",
                },
              ],
            },
            {
              value: "others",
              disabled: false,
              label: "Others",
              children: [
                {
                  value: "dialog",
                  disabled: false,
                  label: "Dialog 对话框",
                },
                {
                  value: "tooltip",
                  disabled: false,
                  label: "Tooltip 文字提示",
                },
                {
                  value: "popover",
                  disabled: false,
                  label: "Popover 弹出框",
                },
                {
                  value: "card",
                  disabled: false,
                  label: "Card 卡片",
                },
                {
                  value: "carousel",
                  disabled: false,
                  label: "Carousel 走马灯",
                },
                {
                  value: "collapse",
                  disabled: false,
                  label: "Collapse 折叠面板",
                },
              ],
            },
          ],
        },
        {
          value: "ziyuan",
          disabled: false,
          label: "资源",
          children: [
            {
              value: "axure",
              disabled: false,
              label: "Axure Components",
            },
            {
              value: "sketch",
              disabled: false,
              label: "Sketch Templates",
            },
            {
              value: "jiaohu",
              disabled: false,
              label: "组件交互文档",
            },
          ],
        },
      ],
      cascader: [],
      id: 0,

      value2: [],
      options1: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
    };
  },
  computed: {
    numArr() {
      const str = String(this.num);
      return [parseInt(str[0]), parseInt(str[1]), parseInt(str[2])];
    },
  },

  methods: {
    handleChangeCascader(v) {
      this.cascader.push(v);
      //   this.id++;
      console.log("v ==>", v);
      //   this.options[0].children[0].disabled=true
    },
    MapStr(item, xit, select = false) {
      item.forEach((v) => {
        if (select) {
          v.disabled = true;
        }
        if (v.value == xit) {
        }
        if (v.children.length) {
          this.MapStr(v.children, xit, true);
        }
      });

      return item;
    },
    handleClick(e) {
      if (e.target.title === "edit") {
        console.log("结果集合", e.target.dataset.id);
        console.log("target", e.target, "currentTarget", e.currentTarget);
      }
    },
  },
};
</script>
<style scoped>
.flex {
  display: flex;
}
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
</style>